<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    watch：监听器 侦听属性
    1.写法是函数
    2.一个值变化，影响到多个结果
    3.逻辑介于 computed 和 methods 之间
    4.必须是data里面已有的
    5.没有缓存
    6.只有:一个值变化，影响到多个结果,无法反推

    7.*****只有watch可以监控路由（$route）
    <div id="app">
        <input type="text" v-model="firstName">
        +
        <input type="text" v-model="lastName">
        =
        <input type="text" v-model="fullName">

        <input type="text" v-model.number="obj.n.a">
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                firstName: "李",
                lastName: "丽丽",
                fullName: "李-丽丽",
                obj: {
                    n: {
                        a: 10
                    }
                }
            },
            watch: {
                fullName(newValue, oldValue) {//简写
                    //console.log(newValue,oldValue);
                    let arr = newValue.split("-");
                    this.firstName = arr[0];
                    this.lastName = arr[1];
                }
                // fullName:{//全写，可以设置属性
                //     handler(newValue,oldValue){
                //         console.log("111");
                //        let arr=newValue.split("-");
                //        this.firstName=arr[0];
                //        this.lastName=arr[1];
                //     },
                //     immediate:true//打开页面，立刻监控1次
                // }

                // obj:{//全写，可以设置属性
                //     handler(newValue,oldValue){
                //         console.log(newValue,oldValue);
                //     },
                //     deep:true//默认 无法深度监控，对象里面内容的变化
                //     //为true,就可以实现深度监听
                // }

                //复杂内容监控的时候，必须加引号
                // "obj.n.a": {//全写，可以设置属性
                //     handler(newValue, oldValue) {
                //         console.log(newValue, oldValue);
                //     }
                // }
            }
        })
    </script>
</body>

</html>